<template>
    <a-modal v-model="signVisible" title="生成签约二维码" @ok="okCodeForm" width="720px" okText="生成签约二维码" cancelText="取消">
        <div style="display: flex;background: #f5f5f5;">
            <div style="width:350px;background: #fff;">
                <a-form :form="signForm" layout="vertical" ref="signForm">
                    <a-form-item label="企业名称">
                            <a-select style="width:240px" v-decorator="[ 'enterpriseId', { rules: [
                                        { required: true, message: '请选择企业!' }]
                                        } ]" placeholder="请选择">
                                <a-select-option :value="item.value" :key="item.value" v-for="item in companyList">{{item.label}}</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="服务协议：">
                            <a-select style="width:240px" v-decorator="[ 'pactTempId', { rules: [
                                        { required: true, message: '请选择服务协议!' }]
                                        } ]" placeholder="请选择">
                                <a-select-option :value="item.id" :key="item.id" v-for="item in tempList">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                </a-form>
            </div>
            <div style="flex: 1;background: #fff;margin-left:10px;padding:10px;">
                <div class="qrcode" ref="qrCodeUrl"></div>
                <a-empty v-if="!flag" description="暂无二维码"/>
            </div>
        </div>
    </a-modal>
</template>
<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import QRCode from 'qrcodejs2'
export default {
    name: "addQrcode",
    data() {
        return {
            signVisible:false,//二维码
            idCard:'',
            flag:false,
            tempList:[],
            companyList:[]
        }
    },
    beforeCreate() {
        this.signForm = this.$form.createForm(this, {name: 'sign_form'});
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    methods: {
        add(){
            this.$nextTick(()=>{
                 var values = this.signForm.getFieldsValue();
                 if(Object.keys(values).length >= 1){
                     this.signForm.setFieldsValue({
                        "pactTempId":'',
                        "enterpriseId":'',
                    })
                 }
                let qr = this.$refs.qrCodeUrl;
                if(qr !== undefined){
                    qr.innerHTML = '';
                }
            });
            this.flag = false;
            this.signVisible = true;
            this.initSelect();
        },
        async initSelect(){
            let params = {parkId:this.userInfo.relationId}
            this.companyList = await store.dispatch('parkIdGetEnterpriseList',params);
            const {protocol} = await store.dispatch('allGetSginRelation',this.userInfo.relationId);
            this.tempList = protocol
        },
        okCodeForm(){
             this.signForm.validateFieldsAndScroll(async(err, values) => {
                if (!err) {
                    this.flag = true;
                    this.$refs.qrCodeUrl.innerHTML = '';
                    const wchatUrl = process.env.VUE_APP_CODE_URL+'?temp='+values.pactTempId+'&company='+values.enterpriseId+'&park='+this.userInfo.relationId;
                    var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                        text: wchatUrl,
                        width: 200,
                        height: 200,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                }
            });
        },
    }
}
</script>
<style>
    .qrcode img{
        margin: 0 auto;
    }
</style>